<template>
	<div class="add-brand-box">
		<h3 style="margin-top: 0;">{{ title }}</h3>
		<p style="margin-top: 0;">文章图片:</p>
		<global-upload  :isIdcard="false" :isCreateShop="true" 
			@imageUpload="businessLicenseUploadFn" @imageRemove="businessLicenseRemoveFn"
			:initOne="languageInfo.img_url" :isHeadImg="true">
		</global-upload>
		<p>文章名称:</p>
		<el-input v-model="languageInfo.name" @change="sendParamsFn" placeholder="请输入文章名称" style=""></el-input>
		<p>文章内容:</p>
		<div class="sn-flex">
			<el-input v-model="languageInfo.content"  placeholder="请输入文章名称" style="" disabled></el-input>
			<el-button class="sn-btn" @click="markDownDialog = true" style="margin-left: 10px;">编辑内容</el-button>
		</div>
			<el-dialog
			:visible.sync="markDownDialog"
			class="sn-default-dialog"
			append-to-body
			width="1000px"
			>
			<div class="sn-title" slot="title">文章内容编辑</div>
			<div>
				<h3 style="text-align:center;margin-right: 20px;">正在编辑文章"{{title}}" </h3>
				<h3 style="text-align:center;margin-right: 20px;">Ctrl+s 保存功能信息 </h3>
				<Markdown v-if="markDownDialog" :value="languageInfo.content"  :toolbars="toolbars" @on-save="markdownSave" @on-ready="markDownReadyFn" @on-upload-image="markDownUploadFn"/>
				<p style="text-align: center;">
					<el-button class="sn-btn" @click="saveFn">保存</el-button>
					<el-button class="sn-btn" @click="markDownDialog = false">关闭</el-button>
				</p>
				
			</div>
			</el-dialog>
			
		<!-- autoSave -->
	</div>
</template>
<script>
import GlobalUpload from '@/components/GlobalUpload';
  import Markdown from 'vue-meditor'
import {uploadAvatar} from '@/api/user'

export default {
	components: { GlobalUpload,Markdown },
	data() {
		return {
			languageInfo:{},
			markDownDialog:false,
			markdownDom:'',
			toolbars:{
				uploadImage:true	
			}
		};
	},
	props:{
		title:{
			type:String,
			default:''
		},
		type:{
			type:String,
			default:''
		},
		initData:{
			type:Object,
			default:()=>{}
		}
	},
	created(){
		
		this.languageInfo =_.cloneDeep(this.initData);
	},
	methods: {
		saveFn(){
			this.markdownDom.vm.handleSave();
		},
		businessLicenseUploadFn(file) {
			this.languageInfo.img_url = file.url;
			this.sendParamsFn();
		},
		businessLicenseRemoveFn() {
			this.languageInfo.img_url = '';
			this.sendParamsFn();
		},
		sendParamsFn(){
			this.$emit('checkCondition',this.languageInfo);
		},
		markDownReadyFn(markdown){
			this.markdownDom = markdown;
		},
		async markDownUploadFn(val){
			let formData = new FormData()
     		formData.append('file', val, 'avatar.jpg');
			const res = await uploadAvatar(formData);
			if(res.code === 200){
				this.markdownDom.insertContent(`![image](${res.data[0].url})`);
			}else{
				this.$message.error('上传失败，错误信息：'+res.erroMessage);
			}
		},
		async markdownSave(data){
			this.languageInfo.content = data.value;
			this.markDownDialog = false;
			this.$emit('checkCondition',this.languageInfo);
		},
	}
};
</script>
<style lang="scss" scoped>
.add-brand-box{
	box-sizing: border-box;
	padding: 20px;
	background: #f9f9f9;
	margin-top: 20px;
	border-radius: 10px;
 }
</style>